<template>
  <div>
    <a-modal
      :title="modalTitle"
      width="1000px"
      v-model:open="visible"
      cancelText="取消"
      @ok="handleOk"
      :footer="operationName === '审核' ? null : ''"
    >
      <div class="steps">
        <a-row justify="center" algin="middle">
          <a-col flex="auto" class="steps_title">
            <ExclamationCircleOutlined class="icon" />审核步骤
          </a-col>
          <a-col flex="35px">
            <span @click="doAction('deleteSteps')">
              <CloseOutlined class="icon_2" />
            </span>
          </a-col>
        </a-row>
        <a-steps size="small" :current="current" :items="items"></a-steps>
        <div class="steps-content">
          <img
            v-if="steps[current].status === 'error'"
            class="w120px mr8px"
            src="~@/assets/images/steos_error.png"
            alt=""
          />
          <img
            v-else
            class="w120px mr8px"
            src="~@/assets/images/steps_success.png"
            alt=""
          />
          <div class="steps-content_title">
            {{ steps[current].content }}
            <p v-if="current === 2" style="font-size: 12px">
              审核通常会在1~2个工作日内完成，请耐心等待
            </p>
          </div>
          <div class="steps-action">
            <a-button v-if="current < steps.length - 1" type="primary" @click="next"
              >Next</a-button
            >
            <a-button
              v-if="current == steps.length - 1"
              type="primary"
              @click="message.success('Processing complete!')"
            >
              Done
            </a-button>
            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
              >返回上一步</a-button
            >
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { reactive, ref, nextTick, computed } from "vue";

const ModalOpenType = {
  ADD: "add",
  EDIT: "edit",
  DETAIL: "detail",
};
const visible = ref(false);
// const formRef = ref(null);

const operationName = ref("");
const props = defineProps(["name"]);
const modalTitle = computed(() => operationName.value + props.name);

// const resetForm = () => {
//   formRef.value.clearValidate();
//   formRef.value.resetFields();
// };
const open = (type, id) => {
  visible.value = true;
  nextTick(async () => {
    // resetForm();
    console.log(props);
    if (type === ModalOpenType.EDIT) {
      operationName.value = "编辑";
      const rowData = await id;
      replaceFormFieldsValues(rowData);
    } else if (type === ModalOpenType.ADD) {
      operationName.value = "新增";
    } else {
      operationName.value = "审核";
      const rowData = await id;
      replaceFormFieldsValues(rowData);
    }
  });
};

// const getRowById = id => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       resolve({
//         schoolId: 2,
//         courseName: 'qwe',
//         id: '1',
//       })
//     }, 300)
//   })
// }
// 步骤条
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};
const current = ref(1);
const steps = ref([
  {
    title: "创建游戏",
    content: "已于12月21日提交",
  },
  {
    title: "完善资料",
    content: "资料已更新完成",
    status: "error",
  },
  {
    title: "等待审核",
    content: "提交审核成功",
  },
  {
    title: "发布上线",
    content: "即将在12月25日（1天2时35分）后游戏上线",
  },
]);
const items = steps.value.map((item) => ({
  key: item.title,
  title: item.title,
  status: item.status,
}));

const formState = reactive({
  status: null,
  id: "",
  icons: [],
  name: "",
  age: "",
  address: "",
});

const replaceFormFieldsValues = (data) => {
  Object.keys(data).forEach((key) => {
    formState[key] = data[key];
  });
};
const handleOk = () => {
  //   formRef.value
  //     .validate()
  //     .then(() => {
  //       console.log("values", formState, toRaw(formState));
  //       console.log("operationName.value", operationName.value);
  //       if (operationName.value == "编辑") {
  //         console.log(111, "222");
  //       } else {
  //         console.log(222, "222");
  //       }
  //       visible.value = false;
  //     })
  //     .catch((error) => {
  //       console.log("error", error);
  //     });
  visible.value = false;
};
const doAction = (type) => {
  console.log("type: ", type);
  //   if (type == "deleteSteps") {
  //     items.value.pop();
  //   }
};

defineExpose({
  open,
});
</script>

<style lang="less" scoped>
.steps_title {
  // color: #3c3c3c;
  font-size: 12px;
  margin: 12px 0;
  font-weight: 600;
}
.icon {
  color: #f0a03c;
  margin-right: 8px;
}
.icon_2 {
  color: #ccc;
  cursor: pointer;
}
// .steps {
//   margin-top: 12px;
//   padding: 12px;
// }
:deep(.ant-steps-item-finish
    > .ant-steps-item-container
    > .ant-steps-item-content
    > .ant-steps-item-title::after) {
  border: 1px solid #4cc87e;
}
:deep(:where(.css-dev-only-do-not-override-1hsjdkk).ant-steps
    .ant-steps-item-finish
    .ant-steps-item-icon) {
  background-color: #4cc87e;
  border: 1px solid #4cc87e !important;
}
:deep(.ant-steps-item-process .ant-steps-item-icon) {
  background-color: #4cc87e;
  border: 1px solid #4cc87e !important;
}
:where(.css-dev-only-do-not-override-19iuou).ant-form-item
  :deep(.ant-form-item-label > label) {
  color: #6e6e6e;
}
:deep(:where(.css-dev-only-do-not-override-1hsjdkk).ant-steps.ant-steps-small
    .ant-steps-item-description) {
  font-size: 12px;
  color: #6e6e6e;
}
:deep(.ant-steps-item-process .ant-steps-item-icon) {
  background-color: #4cc87e !important;
}
//
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  min-height: 200px;
  text-align: center;
  padding: 16px;
}
.steps-content_title {
  font-size: 24px;
}
.steps-action {
  margin-top: 24px;
}
[data-theme="dark"] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>
